<template>
    <view
        @touchstart="touchstart($event, props.index)" 
        @touchmove.stop.prevent="touchmove($event, props.index)" 
        @touchend="touchend($event, props.index)" 
        @touchcancel="touchend($event, props.index)"
    >
        <slot></slot>
    </view>
</template>

<script lang="ts" setup>
import { inject, type Ref } from 'vue';

defineOptions({
    options: {
        virtualHost: true,
    }
});

const props = defineProps<{
    index: number;
}>();

const touchstart = inject<(e: any, index: number)=>void>('touchstart')!;
const touchmove = inject<(e: any, index: number)=>void>('touchmove')!;
const touchend = inject<(e: any, index: number)=>void>('touchend')!;

</script>